<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下, 你就不知道</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--头部-->
<header id="header">
    <!--左边-->
    <div class="header-left">
            <span>
                <img src="images/weather.png" alt="" align="center">
            </span>
        <span class="msg-span">
                <span>|</span>
                <a href="#">换肤</a>
                <a href="#">消息</a>
            </span>
    </div>
    <!--右边-->
    <div class="header-right">
        <a href="">新闻</a>
        <a href="">hao123</a>
        <a href="">地图</a>
        <a href="">学术</a>
        <a href="http://www.itlike.com">撩课学院</a>
        <a href="" class="more-product">更多产品</a>
    </div>
</header>
<!--搜索-->
<section id="content">
    <!--logo-->
    <div class="logo">
        <img src="images/bd_logo.png" alt="百度logo">
    </div>
    <div class="search">
        <form action="http://www.itlike.com">
            <input name="content" type="text" class="search-input">
            <input name="btn" type="submit" class="search-submit" value="百度一下">
        </form>
    </div>
    <!--搜索-->
</section>
<!--列表-->
<section id="list">
    <!--头部-->
    <div class="list-head">
        <!--左边-->
        <div class="list-head-left">
            <a href="">
                <img src="images/person_icon.png" alt="">
                <span>我的关注</span>
            </a>
            <a href="">
                <span>推荐</span>
            </a>
            <a href="">
                <span>导航</span>
            </a>
        </div>
        <!--右边-->
        <div class="list-head-right">
            <a href="#">
                <img src="images/setting_icon.png" alt="">
            </a>
        </div>
    </div>
    <!--内容-->
    <div class="list-content">
        <!--内容的左边-->
        <div class="list-content-left">
            <!--1-->
            <div class="list-content-cell1">
                <h3>大满贯14冠！德约3-0完胜波特罗 美网三度封王</h3>
                <img src="images/cell_img1.png" alt="">
                <img src="images/cell_img2.png" alt="">
                <img src="images/cell_img3.png" alt="">
                <p>网易新闻 09-20 13:19</p>
            </div>
            <!--2-->
            <div class="list-content-cell2">
                <div class="cell-img">
                    <img src="images/cell_img1.png" alt="">
                </div>
                <div class="cell-title">
                    <h3>大满贯14冠！德约3-0完胜波特罗 美网三度封王</h3>
                    <p>网易新闻 09-10 13:19</p>
                </div>
            </div>
            <!--3-->
            <div class="list-content-cell2">
                <div class="cell-img">
                    <img src="images/cell_img2.png" alt="">
                </div>
                <div class="cell-title">
                    <h3>大满贯14冠！德约3-0完胜波特罗 美网三度封王</h3>
                    <p>网易新闻 09-10 13:19</p>
                </div>
            </div>
        </div>
        <!--内容的右边-->
        <div class="list-content-right">
            <div class="right-top">
                <h4>实时热点</h4>
                <div>
                    <img src="images/circle_icon.png" alt="">
                    <span>换一换</span>
                </div>
            </div>
            <div class="right-body">
                <ul>
                    <li>高晓松 丁香医生</li>
                    <li>中国参加俄军演</li>
                    <li>高晓松 丁香医</li>
                    <li>中国参加俄军演</li>
                    <li>高晓松 丁香医生</li>
                    <li>中国参加俄军演</li>
                    <li>高晓松 丁香医</li>
                    <li>中国参加俄军演</li>
                    <li>高晓松 丁香医生</li>
                    <li>中国参加俄军演</li>
                    <li>高晓松 丁香医</li>
                    <li>中国参加俄军演</li>
                </ul>
            </div>
        </div>
    </div>
</section>
</body>
</html>